<template>

  <div class="login">
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
  <el-form-item label="登录名" prop="userAccount">
    <el-input v-model="ruleForm2.userAccount"></el-input>
  </el-form-item>
   <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
    <el-button @click="resetForm('ruleForm2')">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
export default {
  data() {
    /* var checkUserAccount = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }
        return true;
  
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }
         return true;
      };*/

    return {
      ruleForm2: {
        pass: "123456",

        userAccount: "admin"
      },
      rules2: {
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 18, message: "长度5至18个字符", trigger: "blur" }
        ],

        userAccount: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 18, message: "长度5至18个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        console.log(666);
        if (valid) {
          if (
            this.ruleForm2.userAccount == "admin" &&
            this.ruleForm2.pass == "123456"
          ) {
            this.$store.commit("SAVE_USERINFO", this.ruleForm2);
            this.$router.push({ name: "homeLink" });
          } else {
            let _this = this;
            this.$axios
              .get("/api/Home/checkLogin", {
                params: {
                  useranme: _this.ruleForm2.userAccount,
                  password: _this.ruleForm2.pass
                }
              })
              .then(data => {
                if (data.data != null) {
                  this.$store.commit("SAVE_USERINFO", data.data);
                  this.$router.push({ name: "homeLink" });
                }
                // console.log(data.data);
              })
              .catch(err => {
                console.log(err);
              });
          }
        } else {
          console.log("error");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  beforeRouteEnter: (to, from, next) => {
   
  
    next(vm => {
      if (vm.$store.state.userInfo.userAccount) {
        vm.$store.commit("SAVE_USERINFO", {});
      }
    //  alert(vm.$store.state.userInfo.userAccount);
    });
  }
};
</script>
<style scoped>
html,
body,
#app,
.login {
  height: 100%;
}
@media (max-width: 576px) {
  .login {
    margin-top: 10vw;
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
@media (min-width: 576px) {
  .login {
    margin-top: 10vw;
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
@media (min-width: 768px) {
  .login {
    margin-top: 10vw;
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
@media (min-width: 992px) {
  .login {
    margin-top: 10vw;
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
</style>


